<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <link th:href="@{index.css}" type="text/css" rel="stylesheet"/>
</head>

<body>
<div class="main">
    <div class="table">
        <div>
            <h4>部门信息</h4>
            <table class="gridtable">
                <thead>
                <th>ID</th>
                <th>部门名称</th>
                <th>操作</th>
                </thead>
                <tbody>
                <tr th:each="department : ${departments}">
                    <td th:text="${department.getId()}"/>
                    <td th:text="${department.getDepartName()}"/>
                    <td>
                        <a th:href="${'/deldep/' + department.getId()}">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div>
            <h4>员工信息</h4>
            <table class="gridtable">
                <thead>
                <th>ID</th>
                <th>姓名</th>
                <th>生日</th>
                <th>所属部门</th>
                <th>操作</th>
                </thead>
                <tbody>
                <tr th:each="empoyee : ${empoyees}">
                    <td th:text="${empoyee.getId()}"/>
                    <td th:text="${empoyee.getName()}"/>
                    <td th:text="${#dates.format(empoyee.getBirth(), 'yyyy-MM-dd')}"/>
                    <td th:text="${empoyee.getDepartId()}"/>
                    <td>
                        <a th:href="${'/delemp/' + empoyee.getId()}">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div>
            <h4>操作信息</h4>
            <table class="gridtable">
                <thead>
                <th>数据来源</th>
                <th>操作类型</th>
                <th>来源ID</th>
                </thead>
                <tbody>
                <tr th:each="log : ${logs}">
                    <td th:text="${log.getDataOrigin()}"/>
                    <td th:text="${log.getOperateType()}"/>
                    <td th:text="${log.getOriginId()}"/>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="operate">
        <button id="addDep">新增部门</button>
        <button id="addEmp">新增员工</button>
        <span class="tips"></span>
    </div>
    <div id="form" class="form">
        <span>
            部门名称：<input id="departName" placeholder="请输入部门名称"/>
        </span>
        <button id="submitDep">提交</button>
    </div>
    <div id="formEmp" class="form">
        <span>
                员工姓名：<input id="name" placeholder="请输入员工姓名"/>
        </span>
        <span>
                员工生日：<input id="birth" type="date" placeholder="请输入员工年龄"/>
        </span>
        <span>
                所属部门：
            <select id="departId">
                <option th:each="department : ${departments}" th:value="${department.getId()}" th:text="${department.getDepartName()}" />
            </select>
        </span>
        <button id="submitEmp">提交</button>
    </div>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    $(function () {
        $('#form').hide();
        $('#formEmp').hide();
    });
    $('#addDep').click(function () {
        var text = this.innerText;
        if (text === '新增部门') {
            this.innerText = '关闭新增部门';
            $('#form').show();
        } else {
            this.innerText = '新增部门';
            $('#form').hide();
        }
    });
    $('#addEmp').click(function () {
        var text = this.innerText;
        if (text === '新增员工') {
            this.innerText = '关闭新增员工';
            $('#formEmp').show();
        } else {
            this.innerText = '新增员工';
            $('#formEmp').hide();
        }
    });
    $('#submitEmp').click(function () {
        var body = {
            name: $('#name').val(),
            departId: $('#departId').val(),
            birth: $('#birth').val()
        };
        $.ajax({
            url: '/addEmp',
            data: JSON.stringify(body),
            type: 'post',
            contentType: 'application/json',
            success: function (res) {
                location.reload();
            }
        })
    });
    $('#submitDep').click(function () {
        var body = {
            departName: $('#departName').val()
        };
        $.ajax({
            url: '/addDep',
            data: JSON.stringify(body),
            type: 'post',
            contentType: 'application/json',
            success: function (res) {
                location.reload();
            }
        })
    })
</script>
</body>
</html>